import Icon from '@/components/Icon';
import Input from '@/components/Input';
import NavBar from '@/components/NavBar';
import { useEffect, useRef, useState } from 'react';
import styles from './index.module.scss';
import io, { Socket } from 'socket.io-client';
import { baseURL } from '@/utils/request';
import { getToken } from '@/utils/storage';
import { Toast } from 'antd-mobile';

//1. 改造受控组件
// 2.websocket,通信协议，双向通信
// 与Http的不同：http是单项通信，只有由客户端向服务端发送信息。每次通信后，就断开
// 解websocket
//   含义： 是一种通信协议，
//   与HTTP的不同： http是单项通信，只能由客户端向服务端发送消息。每次通信后，连接断开
//   优点： 长链接，服务端可以主动向客户端发消息。
//   场景：聊天、热加载（热更新）。
//   热更新：开发服务器-> 浏览器发送消息
export default function Chat() {
  type MsgListType = {
    type: string;
    msg: string;
    timestamp: number;
  };
  const [msg, setMsg] = useState('');
  const [msgList, setMsgList] = useState<MsgListType[]>([]);
  // 绑定ref,绑定类型
  const clientRef = useRef<Socket | null>(null);
  //发送消息
  useEffect(() => {
    clientRef.current = io(baseURL, {
      query: {
        token: getToken().token,
      },
      transports: ['websocket'],
    });
    // 3.监听成功后返回的数据
    clientRef.current.on('connect', () => {
      console.log('连接成功');
      setMsgList([
        { type: 'robot', msg: '你好,我是小智', timestamp: Date.now() },
      ]);
    });
    // 4.接收信息，形参代表服务器发来的信息,data代表机器人回复数据
    clientRef.current.on('message', (data) => {
      // console.log(data);
      //覆盖问题的解决
      setMsgList((proList) => {
        return [...proList, { type: 'robot', ...data }];
      });
    });

    //7.关闭连接，组件销毁的时候
    return () => {
      // 用函数的话，如果爆红为null就加个？,可选链
      clientRef.current?.close();
    };
  }, []);

  // 聊天信息自动滚动
  useEffect(() => {
    window.scrollTo({
      top: document.body.scrollHeight,
      behavior: 'smooth', //平滑下滚
    });
  }, [msgList]);
  const handleSendMag = () => {
    if (!msg.trim()) {
      Toast.show({ content: '信息不能为空' });
      return;
    }
    const userMag = { msg: msg, timestamp: Date.now() };
    // 5.发送信息主意，注意数据格式
    clientRef.current?.emit('message', userMag);
    // 关系数据
    setMsgList([...msgList, { type: 'user', ...userMag }]);
    // 发送成功清空数据
    setMsg('');
  };
  // 回车事件
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      handleSendMag();
    }
  };
  return (
    <div className={styles.root}>
      {/* 顶部导航栏 */}
      <NavBar fixed>小智同学</NavBar>

      {/* 聊天记录列表 */}
      <div className="chat-list">
        {msgList.map((item) => {
          return item.type === 'robot' ? (
            <div className="chat-item robot" key={item.timestamp}>
              <Icon type="iconbtn_xiaozhitongxue" />
              <div className="message">{item.msg}</div>
            </div>
          ) : (
            <div className="chat-item user" key={item.timestamp}>
              <img
                src={
                  'https://tse4-mm.cn.bing.net/th/id/OIP-C.IImCJoSHQJj_3LIBpQP3nwAAAA?w=196&h=196&c=7&r=0&o=5&dpr=1.12&pid=1.7'
                }
                // src={'http://toutiao.itheima.net/images/user_head.jpg'}
                alt=""
              />
              <div className="message">{item.msg}</div>
            </div>
          );
        })}
      </div>
      {/* 聊天记录列表 - 结束 */}

      {/* 底部消息输入框 */}
      <div className="footer">
        <div className="input-footer">
          <Icon type="iconbianji" />
          <Input
            autoFocus
            className="no-border"
            placeholder="请描述您的问题"
            value={msg}
            onChange={(e) => setMsg(e.target.value)}
            onKeyDown={(e) => handleKeyDown(e)}
          />
          <span className="send" onClick={handleSendMag}>
            发送
          </span>
        </div>
      </div>
    </div>
  );
}
